<script lang="ts" setup>
import { ref } from "vue";
import Table from "@/components/common/MyTable.vue";
import Header from "@/components/common/MyHeader.vue";
import MyVisitor from '@/components/wl/Visitor.vue'
import service from '@/api/index'
import { onMounted } from "vue";
var tableData: any = ref([]);
var delid: any = ref()
var plid: any = ref([])
var arr: any = ([])
var str: any = ('')
var check = (select: any, row: any) => {

  delid.value = row.visitorId

  for (var key in select) {
    if (arr.indexOf(select[key].visitorId) == -1) {
      arr.push(select[key].visitorId)
    }
  }
  str = arr.join(',')
};

var checkAll = (select: any) => {

  select.forEach((item: any) => {
    plid.value.push(item.visitorId)
  })
  for (var i = 0; i <= plid.value.length - 1; i++) {
    if (arr.indexOf(plid.value[i]) == -1) {
      arr.push(plid.value[i])
    }
  }
  str = arr.join(',')
}

onMounted(async () => {
  var res = await service.visitor.visitor_list()
  tableData.value = res.data.data
})
const tableData3 = ref([])
//批量删除
var del = async () => {
  var res = await service.visitor.visitor_delall({ ids: str })
  var res = await service.visitor.visitor_list()
  tableData.value = res.data.data
};
var add = () => {
  // table.value = true
  play.value = !play.value
};
//查询
var input1 = ref('')
var input2 = ref('')
var select = ref('')
var tableData1 = ref([])
var find = async () => {
  // tableData3.value = tableData.value
  // tableData.value = tableData.value.filter(item => item.name == input1.value && item.address == input2.value && item.status == select.value)
  tableData1.value = tableData.value
  tableData.value = tableData.value.filter(item => item.visitorName == input1.value)
  // console.log(tableData.value);
  // var res = await service.visitor.visitor_find({ id: tableData.value.visitorId })
  // tableData.value = res.data.data
}

var reverse = () => {
  tableData.value = tableData1.value

}
//新增
var play = ref(false)
var change = async (e) => {
  if (e.target.className == 'el-button is-text change') {
    play.value = !play.value
    // centerDialogVisible.value = true
  }
  if (e.target.className == "el-button el-button--primary el-button--large") {
    play.value = !play.value
  }
}

//详细
var deatil = () => {
  play.value = !play.value
  
}
//弹出框
const centerDialogVisible = ref(false)
//删除单条数据
var dellet = async (e) => {
  var res = await service.visitor.visitor_del({ id: delid.value })
  // tableData.value = tableData.value.filter(item => item.visitorId != delid.value)
  var res = await service.visitor.visitor_list()
  tableData.value = res.data.data
}
</script>
<template >
  <div class="tenement_sixth" style="position:relative ;">
    <Header title="访客信息登记" @del="del" @add="add" />
    <div class="main">
      <div class="nav">
        <div class="kuang">
          <el-form class="form">
            <div class="left">
              <span>访客姓名：</span>
              <el-input placeholder="请输入访客姓名" v-model="input1" />
            </div>
            <div class="center">
              <span>访客类型</span>
              <el-select placeholder="请选择" v-model="select">
                <el-option label="企业" value="" />
                <el-option label="公寓" value="" />
                <el-option label="其他" value="" />
              </el-select>
            </div>
            <div class="right">
              <span>联系方式：</span>
              <el-input placeholder="请输入联系方式" v-model="input2" />
            </div>
            <div class="btns">
              <el-button type="success" class="chaxun" @click="find">查询</el-button>
              <el-button type="info" plain @click="reverse">重置</el-button>
            </div>
          </el-form>
        </div>
      </div>
      <div class="tableBox">
        <Table :data="tableData" @check="check" @check-all="checkAll"
          :keys="['flex', 'visitorName', 'telephone', 'xinghao', 'weizhi', 'status', 'wechat', 'time',]"
          :label="['值', '访客姓名', '联系方式', '造访类型', '造访单位', '是否驾车', '车牌号码', '造访结束时间',]" :status="['status']">
          <template #status> 是 </template>
          <template #btn> <button @click="deatil">详细</button>
            <button style="margin-left: 30px" @click="dellet">删除</button>
          </template>
        </Table>
      </div>
    </div>
    <my-visitor v-show="play" @click="change"></my-visitor>
  </div>
</template>
<style scoped lang="scss">
.tenement_sixth {
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    justify-content: space-between;
    height: 60px;
    background: #fff;
    align-items: center;
    padding: 0 10px;
    padding-right: 20px;
    margin-bottom: 10px;

    h3 {
      display: flex;
      height: 100%;
      margin-left: 30px;
      font-weight: 600;

      span {
        width: 8px;
        flex: 1;
        background: rgb(94, 128, 234);
        margin-right: 15px;
      }
    }

    .right {
      .add {
        margin-right: 20px;
      }
    }
  }

  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0 20px;

    .nav {
      height: 200px;
      display: flex;
      flex-direction: column;

      .tab {
        height: 50px;
        line-height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;

        span {
          height: 100%;
          padding: 0 30px;
          font-size: 14px;
        }

        span:hover {
          color: green;
          border-bottom: 1px solid green;
        }
      }

      .kuang {
        flex: 1;
        padding: 30px 0;

        .form {
          border: 1px solid #999;
          border-radius: 8px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;

          >div {
            display: flex;
            flex: 2;
            margin: 0 20px;
            align-items: center;

            span {
              white-space: nowrap;
              font-size: 14px;
            }
          }

          .btns {
            flex: 1;
            display: flex;
            justify-content: right;

            .chaxun {
              margin-right: 30px;
            }
          }
        }
      }
    }

    .tableBox {
      flex: 1;

      .table {
        text-align: left;

        :deep(td),
        :deep(th) {
          font-weight: 400;
          border: 1px solid #eee;
          padding-left: 10px;
        }
      }
    }
  }
}
</style>
